<template>
	<!-- 礼物组件 -->
	<view v-if="reward" class="rewardBox">
		<view class="zzc" v-if="reward" @click="close" />
		<view class="box">
			<!-- 标题 -->
			<view class="title-box">
				<view class="box_left">
					<view class="wz">
						<text :class="cate_id === 1 ? 'title1' : 'title2'" @click="getGiftList(1)">礼物</text>
					</view>
					<view class="wz">
						<text :class="cate_id === 2 ? 'title1' : 'title2'" @click="getGiftList(2)">互动</text>
					</view>
					<view class="wz">
						<text :class="cate_id === 3 ? 'title1' : 'title2'" @click="getGiftList(3)">豪华</text>
					</view>
				</view>
				<view class="title4" @click="close">
					<image style="width: 28rpx;height: 28rpx;" src="@/static/live/guanbi.png" mode="scaleToFill" />
				</view>
			</view>
			<!-- 列表 -->
			<view class="list-box">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y Invite">
					<view class="list-item" v-for="(item,index) in giftList" @tap="xzlw(item.id)" :key="index">
						<view class="list_ba" v-if="lw_id === item.id">
						</view>
						<view class="list-img">
							<image style="width: 110rpx;height: 110rpx;" :src=item.cover mode="scaleToFill" />
						</view>
						<text class="list-name">{{ item.title }}</text>
						<text class="list-price">{{ item.price }}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 底部 -->
			<view class="bottom-box">
				<view class="bottom-box-left">
					<view class="bottom-box-left-img">
						<image style="width: 31rpx;height: 31rpx;" src="@/static/live/jinbi.png" mode="scaleToFill" />
					</view>
					<text class="bottom-box-left-price">{{balance}}</text>
					<view style="display: flex;flex-direction: row;" @click="chongzhi()">
						<text class="bottom-box-left-text">充值</text>
						<text class="bottom-box-left-icon">></text>
					</view>
				</view>
				<view class="bottom-box-right">
					<view class="right-item">
						<input type="number" :focus="false" v-model="num" placeholder="1"
							style="width: 150rpx;height: 70rpx;text-align: center;font-size: 24rpx;color: #fff;border-radius: 35rpx"
							@confirm="sendBarrage" />
					</view>
					<text class="right-btn" @click="sendGifts">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		props: {
			reward: {
				type: Boolean,
				default: false

			},
			infos: {
				type: Object,
				default: false

			},
			room_id:{
				type:String,
				default:''
			}
		},

		data() {
			return {
				giftList: [], // 礼物列表
				cate_id: 1, // 礼物分类
				lw_id: 2,
				num: 1,
				zb_id: null,
				live_id: null,
				balance: 0
			}
		},
		watch: {
			reward: {
				immediate: true,
				handler(newVal) {
					if (newVal) {
						var self = this
						this.upBalance()
						self.getGiftList(this.cate_id);
					}
				}
			},
			
		},
		mounted() {
			this.getUserInfo()

		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getCoachInfo',
				'updateCommonOptions',
			]),
			chongzhi() {
				uni.navigateTo({
					url: '/user/pages/stored/list'
				})
			},
			upBalance() {
				var self = this
				this.getUserInfo().then(res => {

					let data = uni.getStorageSync('userInfo')
					self.balance = data.balance

				})
			},
			close() {
				this.$emit("showTab")
				this.$emit("closeReward")
			},
			// 礼物列表
			async getGiftList(index) {
				this.cate_id = index
				let res = await uni.$api.live['liveGiftList']({
					cate_id: this.cate_id
				})
				if (res) {
					this.giftList = res
					this.lw_id = this.giftList[0].id
				}
			},
			// 赠送礼物
			async sendGifts() {
				var self = this
				let id = 0
				// 创建订单
				let res = await uni.$api.live['massageActionTemp']({
					gift_id: this.lw_id, // 礼物ID
				
					live_id: this.room_id, // 直播间ID
					num: this.num
				})
				if (res) {


					// 订单支付 1是微信/2是余额
					id = res.id
					let data = await uni.$api.live['getslistSend']({
						id,
						pay_model: "2"
					})
					if (data) {
						self.upBalance()
					}
				}

			},
			xzlw(id) {
				this.lw_id = id
				this.num = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 公共图片样式
	.mg {
		width: 100%;
		height: 100%;
	}

	.wz {
		height: 70rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 整体盒子
	.rewardBox {
		width: 750rpx;
		height: 630rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #151723;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}

	.Invite {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.zzc {
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 900rpx;
	}

	.box {
		padding: 30rpx;
		width: 750px;
		height: 630rpx;
	}

	/* 标题 */
	.title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 700rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.box_left {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 300rpx;
	}

	.title1 {
		font-size: 28rpx;
		color: #50B784;
	}

	.title2 {
		font-size: 28rpx;
		color: #C5C8D2;
	}

	.title4 {
		width: 28rpx;
		height: 28rpx;
	}

	/* 列表 */
	.list-box {
		width: 750rpx;
		height: 400rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.list-item {
		width: 160rpx;
		height: 210rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
		border-radius: 20rpx;
	}

	.list_ba {
		position: absolute;
		top: 0;
		width: 160rpx;
		height: 190rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
		border-radius: 20rpx;
		background-color: rgb(37, 41, 58);
	}

	.list-img {
		width: 110rpx;
		height: 110rpx;
	}

	.list-name {
		color: #C5C8D2;
		font-size: 24rpx;
	}

	.list-price {
		color: #535561;
		font-size: 18rpx;
	}

	/* 底部 */
	.bottom-box {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 20rpx;
		height: 100rpx;
	}

	.bottom-box-left {
		width: 215rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.bottom-box-left-img {
		width: 31rpx;
		height: 31rpx;
	}

	.bottom-box-left-price {
		color: #ffffff;
		font-size: 28rpx;
	}

	.bottom-box-left-text {
		color: #50B784;
		font-size: 28rpx;
	}

	.bottom-box-left-icon {
		color: #50B784;
		font-size: 28rpx;
	}

	.bottom-box-right {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 300rpx;
		height: 70rpx;
		background-color: #3B3B3F;
		font-size: 28rpx;
		border-radius: 35rpx;
		margin-right: 30rpx;
	}

	.right-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.right-num {
		margin-left: 40rpx;
	}

	.right-icon {
		margin: 0 20rpx;
	}

	.right-btn {
		width: 132rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background: linear-gradient(to right, #4fb784, #a4d79f);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
	}

	/**/
</style>